<template>
  <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="100px">
    <el-form-item label="线路编号" prop="routeNo">
      <el-input clearable :maxlength="50" v-model="queryParams.routeNo" placeholder="请输入线路编号" @keyup.enter="handleQuery"
        class="!w-200px" />
    </el-form-item>
    <el-form-item label="线路名称" prop="routeName">
      <el-input clearable :maxlength="50" v-model="queryParams.routeName" placeholder="请输入线路名称"
        @keyup.enter="handleQuery" class="!w-200px" />
    </el-form-item>
    <el-form-item label="创建时间" prop="createTime">
      <el-date-picker v-model="queryParams.createTime " value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
        end-placeholder="结束时间" type="datetimerange" class="!w-400px" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleQuery">
        搜索
      </el-button>
      <el-button @click="resetQuery">
        重置
      </el-button>
      <el-button v-hasPermi="['lineMange:add']" type="primary" @click="openFormDialog()">新增</el-button>
    </el-form-item>
  </el-form>
  <el-table v-loading="loading" :data="list" border stripe
    :header-cell-style="{ background: '#F3F4F7', color: '#555' }">
    <el-table-column label="编号" align="center" prop="sourceCode" min-width="55" fixed="left"
      :show-overflow-tooltip="true">
      <template #default="{ $index, row }">
        {{ $index + 1 }}
      </template>
    </el-table-column>
    <el-table-column label="线路编号" align="center" prop="routeNo" min-width="200" fixed="left"
      :show-overflow-tooltip="true" />
    <el-table-column label="线路名称" align="center" prop="routeName" min-width="150" :show-overflow-tooltip="true" />
    <el-table-column label="装货地" align="center" prop="loadingPlaceAddress" min-width="200"
      :show-overflow-tooltip="true">
      <template #default="{ row }">
        {{row.loadingPlace}}
      </template>
    </el-table-column>
    <el-table-column label="卸货地" align="center" prop="customerName" min-width="200" :show-overflow-tooltip="true">
      <template #default="{ row }">
        {{row.unloadingPlace}}
      </template>
    </el-table-column>
    <el-table-column label="线路车辆" align="center" prop="coalName" min-width="100" :show-overflow-tooltip="true">
      <template #default="{ row }">
        <el-button type="primary" link @click="viewLineDialog(row)">查看</el-button>
      </template>
    </el-table-column>
    <el-table-column label="备注" align="center" prop="remark" min-width="200" :show-overflow-tooltip="true" />
    <el-table-column label="创建时间" align="center" prop="createTime" min-width="200" :show-overflow-tooltip="true" />
    <el-table-column label="操作" align="center" width="170" fixed="right">
      <template #default="{ row }">
        <el-container class="operate-box">
          <span v-hasPermi="['lineManage:addVehicle']">
            <el-button type="primary" link @click="addVehicle(row)">添加车辆</el-button>
          </span>
          <span v-hasPermi="['lineManage:edit', 'lineMange:delete']">
            <el-dropdown @command="(command) => handleCommand(command, row)">
              <el-button type="primary" link>
                更多
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-hasPermi="['lineManage:edit']" command="edit">
                    <el-button type="primary" link>
                      编辑
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item v-hasPermi="['lineManage:delete']" command="delete">
                    <el-button type="primary" link>
                      删除
                    </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </span>
        </el-container>
      </template>
    </el-table-column>
  </el-table>
  <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
    @pagination="getList" />
  <LineDialog ref="lineDialogRef"></LineDialog>
  <FormDialog ref="formDialogRef" @success="resetQuery"></FormDialog>
  <VehicleDialog ref="vehicleDialogRef" @success="resetQuery"></VehicleDialog>
</template>
<script lang="ts" setup name="lineManage">
  import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
  import * as lineManageApi from '@/api/transportation/lineManage'
  import LineDialog from './lineDialog.vue'
  import FormDialog from './formDialog.vue'
  import VehicleDialog from './vehicleDialog.vue'

  const message = useMessage()
  const loading = ref(false)
  const list = ref([{ sourceCode: 'SMHY24022210-02' }])
  const total = ref(0)
  const queryFormRef = ref()
  const lineDialogRef = ref()
  const formDialogRef = ref()
  const vehicleDialogRef = ref()

  const queryParams = reactive({
    routeNo: undefined,
    routeName: undefined,
    createTime: [],
    pageNo: 1,
    pageSize: 10,
  })

  const getList = async () => {
    loading.value = true
    try {
      const data = await lineManageApi.getQeRoutePage(queryParams)
      list.value = data.list
      total.value = data.total
    } finally {
      loading.value = false
    }
  }

  const handleQuery = () => {
    queryParams.pageNo = 1
    getList()
  }

  const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
  }

  const viewLineDialog = (row) => {
    lineDialogRef.value.open(row)
  }

  const addVehicle = (row) => {
    vehicleDialogRef.value.open(row)
  }

  const handleCommand = (type, row) => {
    switch (type) {
      case 'edit':
        openFormDialog(row.id)
        break;
      case 'delete':
        handleDelete(row.id)
        break;
      default: break;
    }
  }

  const openFormDialog = (id) => {
    formDialogRef.value.open(id)
  }

  const handleDelete = async (id) => {
    await message.confirm('您确认删除该线路吗？')
    await lineManageApi.deleteQeRoute({ id })
    message.success('操作成功')
    resetQuery()
  }

  onMounted(() => {
    getList()
  })
</script>
<style lang="scss" scoped>
  .operate-box {
    .el-button.is-link {
      padding: 0 !important;
    }

    .el-dropdown {
      vertical-align: middle
    }

    >span {
      padding: 0 16px;
      line-height: 13px;
      border-right: 1px solid #D9D9D9;
    }

    >:last-child {
      border-right: none
    }
  }
</style>